<template>
  <div class="container" id="waterfell">
    <!-- <div class="navs">
      <div
        class="item"
        :class="cur == v.id ? 'active' : ''"
        v-for="(v, k) in nav.list"
        :key="k"
        @click="changeDepartment(v)"
      >
        {{ v.label }}
      </div>
    </div> -->
    <div class="title">
      <div class="item" :class="tag == 2 ? 'hot' : ''" @click="changeTag(2)">
        人气
        <div class="tip" v-if="tag == 2"></div>
      </div>
      <div class="item" :class="tag == 1 ? 'hot' : ''" @click="changeTag(1)">
        最新
        <div class="tip" v-if="tag == 1"></div>
      </div>
    </div>
    <waterfellVue
      class="water"
      :data="home.list"
      @update="update"
      :columns="3"
    ></waterfellVue>
    <div v-if="status == 'loading'" style="text-align: center">加载中· · ·</div>
  </div>
</template>

<script>
import waterfellVue from "../../components/waterfell-horizontal.vue";
import {
  nextTick,
  onMounted,
  inject,
  onUnmounted,
  reactive,
  ref,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { storeUser } from "@/store/user";
import * as HomeApi from "@/api/home";
import * as OfficeApi from "@/api/office";
import bus from "@/utils/bus";
import { getTheme } from "../../api/home";
export default {
  name: "",
  components: {
    waterfellVue,
  },
  setup(props, ctx) {
    const tags = inject("tags");
    const route = useRoute();
    const home = reactive({ list: [] });
    const status = ref("");
    const user = storeUser();
    const cur = ref(0);
    const tagName = ref("最新");
    const tag = ref(2);
    const nav = reactive({
      list: [{ id: 0, label: "首页" }],
    });
    const params = reactive({
      CurrentUserAccount: user.UserAccount,
      queryPictureName: "",
      queryThemeID: "",
      queryDepartmentID: "",
      queryTag: "",
      PageSize: "20",
      PageIndex: "1",
      OrderByDatetimeOrReadNumber:tag.value
    });
    const content = ref()
    const init = async () => {
      getThemes();
      if (user.RoleType == 3 || user.RoleType == 2) {
        getDepartment();
      }
      let { data: res } = await HomeApi.getList(params);
      home.list = res.UserData.PicList;
      count.value = res.UserData.Count;
      nextTick(() => {
        window.onscroll = async (e) => {
          console.log(document.body.clientHeight)
          console.log(window.scrollY)
          if (document.body.clientHeight - 929 - window.scrollY < 500) {
            if (status.value == "loading") return;
            if (home.list.length >= count.value) return;
            status.value = "loading";
            params.PageIndex++;
            let { data: res } = await HomeApi.getList(params);
            home.list = [...home.list, ...res.UserData.PicList];
            status.value = "end";
          }
        };
      });
    };
    const count = ref(0);
    const getDepartment = async () => {
      let { data } = await OfficeApi.getList();

      let arr = data.UserData.map((v) => {
        return {
          label: v.DepartmentName,
          id: "department#" + v.DepartmentId,
        };
      });
      for (let x of arr) {
        if (nav.list.findIndex((v) => v.id == x.id) == -1) {
          nav.list.push(x);
        }
      }
    };
    const getThemes = async () => {
      let { data } = await HomeApi.getTheme();
      let arr = data.UserData.map((v) => {
        return { label: v.ThemeName, id: "theme#" + v.ThemeID };
      });
      for (let x of arr) {
        if (nav.list.findIndex((v) => v.id == x.id) == -1) {
          nav.list.push(x);
        }
      }
    };
    onMounted(() => {
      if (route.query.themeId) {
        params.queryThemeID = route.query.themeId;
        cur.value = "theme#" + route.query.themeId;
      }
      if (route.query.themeName) {
        tagName.value = route.query.themeName;
      }
      init();
      bus.$on("search", (v) => {
        for (let x of v) {
          if (x) {
            params[x.label] = x.value;
          }
        }
        params['PageIndex'] = 1
        init();
      });
      bus.$on("changeTheme", (v) => {
        tagName.value = v;
      });
    });
    const update = () => {
      init();
    };
    const changeDepartment = (v) => {
      cur.value = v.id;
      params.PageIndex = 1;
      if (v.id == 0) {
        params.queryDepartmentID = "";
        params.queryThemeID = "";
      } else {
        let arr = v.id.split("#");

        if (arr[0] == "theme") {
          params.queryThemeID = arr[1];
        } else if (arr[0] == "department") {
          params.queryDepartmentID = arr[1];
        }
      }
      init();
    };
    const changeTag = (v) => {
      tag.value = v;
      params.OrderByDatetimeOrReadNumber = v
      // params.
      init();
    };
    return {
      home,
      status,
      nav,
      cur,
      tagName,
      update,
      tags,
      tag,
      changeDepartment,
      changeTag,
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  width: 74%;
  margin: 0 auto;
  .title {
    display: flex;
    align-items: center;
    .item {
      position: relative;
      margin-right: 20px;
      cursor: pointer;
      .tip {
        position: absolute;
        bottom: -5%;
        left: 0;
        height: 2px;
        width: 100%;
        background: #23c79b;
      }
    }
    .hot {
      color: #23c79b;
      font-size: 24px;
      font-weight: 600;
    }
  }
  .navs {
    text-align: center;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .item {
      padding: 12px 24px;
      border-radius: 30px;
      color: #302f2f;
      font-weight: 600;
      font-size: 13px;
      margin-right: 20px;
      cursor: pointer;
      &:hover {
        color: #000;
      }
    }
    .active {
      background: #23c79b;
      font-size: 16px;
      color: #fff;
      &:hover {
        color: #fff;
        background: #23c79bdd;
      }
    }
  }
}
</style>
